<template>
	<view>
		<uni-nav-bar @clickLeft="toBack" color="#555" leftIcon="arrowleft" title="钱包" :fixed="true" :status-bar="true"></uni-nav-bar>
		<view class="body">
			<!-- 钱包余额 -->
			<wallet-card :wallet="walletInfo" @recharge="recharge" @withdraw="withdraw"></wallet-card>

			<!-- 支付宝绑定 -->
			<view class="apay" @tap="setApay">
				<view class="apay-title">支付宝</view>
				<view class="pay-account">
					{{ apay.name && apay.account ? apay.name : '绑定支付宝账号' }}
					<view class="icon iconfont icon-youjiantou"></view>
				</view>
			</view>

			<!-- 消费记录 -->
			<view class="consume-list">
				<scroll-view @scrolltolower="loadMore" scroll-y="true" class="list" :style="{ height: swiperHeight + 'px' }">
					<block v-for="(consume, index) in consumeInfo.list" :key="index"><consume-list-item :consume="consume"></consume-list-item></block>
				</scroll-view>
			</view>

			<!-- 充值弹出层 -->
			<uni-popup :maskClick="true" ref="popupRecharge" type="bottom">
				<popup-recharge @doRecharge="doRecharge" :balance="walletInfo.balance" :coinData="coinList"></popup-recharge>
			</uni-popup>

			<!-- 提现弹出层 -->
			<uni-popup :maskClick="false" ref="popupWithdraw" type="center">
				<pop-withdraw @close="closeWithdraw" :maxValue="walletInfo.balance" :withdrawInfo="withdrawInfo" @confirm="withdrawConfirm"></pop-withdraw>
			</uni-popup>

			<uni-popup :maskClick="false" ref="popupApay" type="center">
				<view class="pop-apay">
					<view class="pop-apay-from-head" @tap="closePay"><view class="pop-apay-from-title">绑定支付宝</view></view>
					<view class="pop-apay-from">
						<view class="pop-apay-from-itme">
							<view class="lable">账户名</view>
							<input type="text" v-model="apay.name" placeholder="请输入支付宝账户名" />
						</view>
						<view class="pop-apay-from-itme">
							<view class="lable">账户号</view>
							<input type="text" v-model="apay.account" placeholder="请输入支付宝账户" />
						</view>
						<view class="set-pay-button" @tap="bindPay">确定</view>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
import popupRecharge from '../../components/wallet/popup-recharge.vue';
import walletCard from '../../components/wallet/wallet-card.vue';
import consumeListItem from '../../components/wallet/consume-list-item.vue';
import popWithdraw from '../../components/wallet/pop-withdraw.vue';
import constant from '../../utils/Constant.js';
import showToast from '../../utils/ToastUtils.js';
export default {
	components: {
		popupRecharge,
		walletCard,
		consumeListItem,
		popWithdraw
	},
	data() {
		return {
			height: 0,
			swiperHeight: 0,
			osType: '',
			apay: {
				name: '',
				account: ''
			},
			walletInfo: {},
			withdrawInfo: {
				img: '',
				title: '',
				desc: ''
			},
			coinList: [],
			consumeInfo: {
				pageNo: 1,
				list: []
			}
		};
	},
	methods: {
		toBack(){
			uni.navigateBack({
				delta:1
			});
		},
		recharge() {
			this.$refs.popupRecharge.open();
		},
		withdraw() {
			if (!this.apay.account || !this.apay.name) {
				this.setApay();
			} else {
				this.$refs.popupWithdraw.open();
			}
		},
		withdrawConfirm(amount) {
			if (amount > this.walletInfo.balance) {
				showToast('提现数额超过可用狐狸币上限');
			} else {
				uni.request({
					url: constant.baseHttpUri + constant.pathUri.withdraw,
					header: constant.authHead(),
					method: 'POST',
					data: {
						currency: amount
					},
					success: res => {
						if (res.data.code === constant.dataCode.OK) {
							this.$refs.popupWithdraw.close();
							showToast('提现申请提交成功');
						} else {
							showToast(res.data.msg);
						}
					},
					fail: r => {
						console.log(r);
					}
				});
			}
		},
		closeWithdraw() {
			this.$refs.popupWithdraw.close();
		},
		setApay() {
			if (!this.apay.name) {
				this.$refs.popupApay.open();
			}
		},
		closePay() {
			this.$refs.popupApay.close();
		},
		loadWithdrawInfo() {
			uni.request({
				url: constant.baseHttpUri + constant.pathUri.withdrawInfo,
				header: constant.authHead(),
				method: 'GET',
				success: res => {
					if (res.data.code === constant.dataCode.OK) {
						this.walletInfo = res.data.data;
						this.apay.name = this.walletInfo.alipayName;
						this.apay.account = this.walletInfo.alipayNo;
					} else {
						showToast(res.data.msg);
					}
				},
				fail: r => {
					console.log(r);
				}
			});
		},
		loadCoinList() {
			uni.request({
				url: constant.baseHttpUri + constant.pathUri.coinList,
				header: constant.authHead(),
				method: 'GET',
				data: {
					type: this.osType === 'ios' ? 2 : 1
				},
				success: res => {
					if (res.data.code === constant.dataCode.OK) {
						this.coinList = res.data.data;
					} else {
						showToast(res.data.msg);
					}
				},
				fail: r => {
					console.log(r);
				}
			});
		},
		loadWalletInfo() {
			uni.request({
				url: constant.baseHttpUri + constant.pathUri.walletInfo,
				header: constant.authHead(),
				method: 'GET',
				data: {
					pageNo: this.consumeInfo.pageNo
				},
				success: res => {
					if (res.data.code === constant.dataCode.OK) {
						if (res.data.data.length > 0) {
							this.consumeInfo.list.push(...res.data.data);
						}
					} else {
						showToast(res.data.msg);
					}
				},
				fail: r => {
					console.log(r);
				}
			});
		},
		bindPay() {
			if (!this.apay.name) {
				showToast('支付名称不能为空');
				return;
			}
			if (!this.apay.account) {
				showToast('支付账户不能为空');
				return;
			}
			uni.request({
				url: constant.baseHttpUri + constant.pathUri.bindPay,
				header: constant.authHead(),
				method: 'POST',
				data: this.apay,
				success: res => {
					console.log(res);
					if (res.data.code === constant.dataCode.OK) {
						this.closePay();
						showToast('支付宝设置成功');
					} else {
						showToast(res.data.msg);
					}
				},
				fail: r => {
					console.log(r);
				}
			});
		},
		doRecharge(id) {
			uni.request({
				url: constant.baseHttpUri + constant.pathUri.recharge,
				header: constant.authHead(),
				method: 'POST',
				data: {
					osType: this.osType === 'ios' ? 2 : 1,
					rechargeType: id
				},
				success: res => {
					console.log(res);
					if (res.data.code === constant.dataCode.OK) {
						uni.requestPayment({
							provider: 'wxpay',
							orderInfo: res.data.data,
							success: res => {
								this.$refs.popupRecharge.close();
								this.consumeInfo.list = [];
								this.loadWithdrawInfo();
								this.loadWalletInfo();
								console.log(res);
							},
							fail: res => {
								console.log(res);
							}
						});
					} else {
						showToast(res.data.msg);
					}
				},
				fail: r => {
					console.log(r);
				}
			});
		},
		callUrl(callUrl) {
			let url = 'weixin://';
			if (plus.os.name == 'Android') {
				let wx = plus.runtime.isApplicationExist({ pname: 'com.tencent.mm', action: 'weixin://' });
				if (wx) {
					plus.runtime.openURL(callUrl);
				}
			} else {
				plus.runtime.openURL(callUrl, function(e) {
					plus.nativeUI.alert('本机未安装微信应用');
				});
			}
		},
		loadMore() {
			this.consumeInfo.pageNo += 1;
			this.loadWalletInfo();
		}
	},
	onLoad() {
		uni.getSystemInfo({
			success: res => {
				this.osType = res.platform;
				this.swiperHeight = res.windowHeight - 292;
				this.loadWithdrawInfo();
				this.loadCoinList();
				this.loadWalletInfo();
			}
		});
	}
};
</script>

<style lang="less" scoped>
.body {
	background: #f5f7fa;
}

.apay {
	padding: 20rpx 40rpx;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	background-color: #ffffff;
	margin-bottom: 20rpx;
	.apay-title {
		font-size: 28rpx;
		font-weight: 500;
		color: #333333;
	}

	.pay-account {
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 28rpx;
		color: #999999;
		.icon-youjiantou::before {
			margin-left: 10rpx;
		}
	}
}

.pop-apay {
	width: 600rpx;
	border-radius: 30rpx;
	background-color: #ffffff;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	box-shadow: 0px 8rpx 16px 0px rgba(0, 0, 0, 0.1);

	.pop-apay-from-head {
		width: 100%;
		position: relative;
		margin: 20rpx 0;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		border-bottom: 1rpx solid #eeeeee;
		.pop-apay-from-title {
			font-size: 36rpx;
			font-weight: 500;
			color: #333333;
		}
	}

	.pop-apay-from {
		margin-top: 40rpx;
	}

	.pop-apay-from-itme {
		margin-bottom: 20rpx;
		padding: 20rpx 0;
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;

		view {
			text-align: center;
			width: 120rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #333333;
			margin-right: 10rpx;
		}
		input {
			border-bottom: 1px solid #d8d8d8;
		}
	}

	.set-pay-button {
		text-align: center;
		margin-top: 30rpx;
		margin-bottom: 60rpx;
		background: linear-gradient(270deg, #fc80a4 0%, #feb7ba 100%);
		font-size: 38rpx;
		font-weight: 500;
		color: #ffffff;
		border-radius: 20rpx;
	}
}

/deep/::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
}
</style>
